<template>
  <el-dialog :showEdit width="40%" align="left" :close-on-click-modal="false" @close="handleClose(ruleFormRef)">
    <TitleBox :title="title"></TitleBox>
    <el-form class="layout-form" :model="editData" :rules="rules" ref="ruleFormRef">
      <el-form-item label="姓名" label-width="100px" prop="userName">
        <el-input placeholder="请输入姓名" v-model="editData.userName"></el-input>
      </el-form-item>
      <el-form-item label="性别" label-width="100px" prop="gender">
        <el-radio-group v-model="editData.gender" class="ml-4">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" label-width="100px" prop="phone">
        <el-input placeholder="请输入手机号" v-model="editData.phone" :disabled="props.disabled"></el-input>
      </el-form-item>
      <el-form-item label="角色" label-width="100px" prop="roleId">
        <el-radio-group class="ml-4" v-model="editData.roleId">
          <!-- <el-radio :value="1" :disabled="roleDisabled">系统管理员</el-radio>
          <el-radio :value="2">医院管理员</el-radio> -->
          <el-radio :value="1" disabled>系统管理员</el-radio>
          <el-radio :value="2" disabled>医院管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="医院" label-width="100px" prop="hospitalName" v-if="showHospital">
        <el-select v-model="editData.hospitalName" placeholder="请选择医院" size="large" @change="changeHospital">
          <el-option v-for="item in hospitialList" :key="item.id" :label="item.hospitalName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item class="layout-footer">
        <el-button style="background-color: #ccc;color: white;" @click="cancle">取消</el-button>
        <el-button type="primary" @click="confirm(editData)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang='ts'>
import { reqAccountHosInfo, reqConfirmAccount, reqEditAccount } from '@/api/account';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import TitleBox from '@/components/titleBox/index.vue';
const title = ref('编辑账号');
const store = useStore();
const props = defineProps(['disabled', 'id', 'showEdit']);
const emit = defineEmits(['cancle', 'confirm']);
// 定义角色禁用
const roleDisabled = ref(false);
const showHospital = ref(true);
// 验证
const ruleFormRef = ref();
const rules = reactive({
	userName: [
		{ required: true, message: '请输入姓名', trigger: 'blur' }
	],
	gender: [
		{ required: true, message: '请选择性别', trigger: 'change' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/, message: '密码必须由8-16位字母和数字组合', trigger: 'blur' }
	],
	roleId: [
		{ required: true, message: '请选择角色', trigger: 'change' }
	],
	hospitalName: [
		{ required: true, message: '请选择医院', trigger: 'change' }
	]
})

// 编辑账号列表
const editData: any = reactive({
	"id": "",
	"userName": "",
	"gender": "",
	"phone": "",
	"roleId": "",
	"roleName": "",
	"hospitalId": "",
	"hospitalName": "",
})
// 各账号的医院列表
const hospitialList = ref<any>([]);
// 请求医院列表
const getHospitalList = async () => {
	const result = await reqAccountHosInfo();
	// console.log('编辑医院下拉列表', result);
	if (result.data.code === 0) {
		hospitialList.value = result.data.result;
	}
}
// 更换医院
const changeHospital = (id: any) => {
	console.log('id', id);
	editData.hospitalId = id;
}
// 设置角色禁用
const changeRoleId = () => {
	if (store.state.roleId === 2) {
		roleDisabled.value = true;
  }
}
onMounted(() => {
	changeRoleId();
})
// 获取当前编辑账号信息
const getAccountInfo = async () => {
	try {
		const res = await reqEditAccount(props.id);
		// console.log('编辑账号', res);
		if (res.data.code === 0) {
			getHospitalList();
			for (const key in editData) {
				editData[key] = res.data.result[key];
			}
		}
		// 判断是否验证医院
		if (res.data.result.roleId === 1) {
			roleDisabled.value = false;
			showHospital.value = false;
		} else if (res.data.result.roleId === 2) {
			roleDisabled.value = true;
			showHospital.value = true;
		}
	} catch (error) {
		console.log(error)
	}
}
// 观察当前点击变化的id
watch(props, () => {
	getAccountInfo();
}, { deep: true })

// 确定账号
const confirm = async (editData: any) => {
	try {
		editData.id = props.id;
		const result = await reqConfirmAccount(editData);
		// console.log("确定编辑数据", result);
		if (result.data.code === 0) {
			ElMessage({
				type: 'success',
				message: '编辑成功',
			})
			emit('confirm');
		}
	} catch (error) {
		console.log(error);
	}

}
// 取消
const cancle = () => {
	emit('cancle');
}
//  关闭对话框,清空内容
const handleClose = (formEl: any) => {
	if (!formEl) return;
	formEl.resetFields();
}
</script>

<style scoped lang='scss'>
.layout-form {
	margin-top: 30px;

	// 密码报错提示
	:deep(.el-form-item__error) {
		left: 10px;
	}

	.el-input {
		width: 90%;
		margin-left: 10px;
	}

	.el-radio-group {
		margin-left: 10px;
	}

	.el-select {
		margin-left: 10px;
		width: 90%;
	}

	.layout-footer {
		margin-top: 30px;
		margin-left: 70%;
	}
}
</style>